<template>
  <div class="redpacket-detail">
    <!-- 头部 -->
    <div class="header3">
      <!--<img :src="leftIcon" class="icon-left" @click="goBack" />-->
      <div class="header-title">QQ红包</div>
      <a href="#" class="record-link" @click.prevent="viewRecords">红包记录</a>
    </div>

    <!-- 主体内容 -->
    <main class="main-content3">
      <div class="avatar" :style="avatarStyle"></div>

      <div class="description">
        本发送的拼手气红包
        <br />
        <span class="blessing-text">大吉大利</span>
      </div>

      <div class="amount">¥ {{ amount }}</div>

      <div class="status-tip">
        收到的红包已存入余额 &gt;
        <br />
      </div>

      <div class="summary">{{ summaryText }}</div>

      <!-- 广告栏 -->
      <div class="ad-bar">
        <div class="ad-content">
          <!-- <div class="avatar" :style="avatarStyle"></div> -->
          <span>出U收U代付代收</span>
          <div class="ad-right">
            <span class="ad-amount">{{ amount }} 元</span>
          </div>
        </div>
        <div class="ad-info">
          <span class="ad-time">{{ currentTime }}</span>
          <span class="ad-tag">手气最佳</span>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

// 图片资源
import leftIcon from '@/assets/left.png'
import bgImage from '@/assets/bg.png'
import avatarPlaceholder from '@/assets/avatar-placeholder.png'

const router = useRouter()

// 响应式数据
const amount = ref(0.07)
const currentTime = ref('22:01:13')

// 计算属性
const avatarStyle = computed(() => ({
  backgroundImage: `url(${avatarPlaceholder})`
}))

const summaryText = computed(() => `1个红包，已领完，共${amount.value}元`)

// 方法
const goBack = () => {
  router.go(-1)
}

const viewRecords = () => {
  router.push('/records')
}
</script>

<style>
body {
  background: #fff;
}

#app {
  background: #fff;
}

.redpacket-detail {
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.header3 {
  height: 150px;
  background-image:url('@/assets/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-left {
  position: absolute;
  left: 1rem;
  top: 60px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.header-title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 60px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
}

.record-link {
  position: absolute;
  right: 1rem;
  top: 60px;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-size: 14px;
}

.main-content3 {
  background: #fff;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 15px;
  background-size: cover;
  background-position: center;
}

.amount {
  color: #d39740;
  font-size: 60px;
  font-weight: 700;
  text-align: center;
  margin: 15px 0;
}

.description {
  color: #666;
  font-size: 16px;
  line-height: 2;
  text-align: center;
  font-weight: bold;
}

.blessing-text {
  color: #b0b0b0;
  font-size: 16px;
}

.status-tip {
  color: #cea960;
  font-size: 16px;
  text-align: center;
  margin: 20px 0;
}

.summary {
  color: #b3b3b3;
  font-size: 14px;
  text-align: center;
  padding-top: 20px;
  text-align: left;
}

.ad-bar {
  background: #f4f4f4;
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 10px;
}

.ad-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.ad-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ad-amount {
  color: black;
}

.ad-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.ad-tag {
  color: #d39740;
}
</style>